<template>
  <div class="my-nav">
    <router-link class="nav" to="/Home">
      <img :src="HomeImg[HomeNum]" />
    </router-link>
    <router-link class="nav" to="/Classify">
      <img
        src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png"
      />
    </router-link>
    <router-link class="nav" to="/Shopcar">
      <img :src="ShopImg[ShopNum]" />
    </router-link>
    <router-link class="nav" to="/User">
      <img :src="userImg[userNum]" />
    </router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      HomeNum: 0,
      HomeImg: [
        "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/67550/26/12426/5094/5d9c4b13Eea435a3f/81328b0609c60a3c.png",
        "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png",
      ],
      ShopNum: 1,
      ShopImg: [
        "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/45205/32/12889/3890/5d9c4b12E7bc2c425/dd60fafbde8542ca.png",
        "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png",
      ],
      userNum: 0,
      userImg: [
        "https://img12.360buyimg.com/img/s130x100_jfs/t1/203343/14/10880/3097/61641568E184a8e0b/4522f6ec5bb9b10b.png",
        "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56206/13/12652/2957/5d9c4b13E503bcd76/1c8543653685e80e.png",
        "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/47480/36/12929/3209/5d9c4b13E97caa63a/4dc0ec8a7e47c2b7.png",
      ],
    };
  },
  methods: {
    changeActive(num) {
      this.active = [0, 0, 0, 0];
      this.active.splice(num, 1, 1);
    },
  },
  watch: {
    $route(to) {
      if (to.path === "/Home") {
        this.HomeNum = 0;
      } else {
        this.HomeNum = 1;
      }
      if (to.path === "/Shopcar") {
        this.ShopNum = 0;
      } else {
        this.ShopNum = 1;
      }
      let lgc = JSON.parse(localStorage.getItem("lgc"));
      if (lgc) {
        if (to.path === "/User") {
          this.userNum = 2;
        } else {
          this.userNum = 1;
        }
      } else {
        this.UserNum = 0;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.my-nav {
  .wh(375,60);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  background: #ffffff;
  .nav {
    flex: 1;
    text-align: center;
    img {
      .wh(60,46);
    }
  }
}
</style>
